<template>
  <div>
    <h3>大纲考核数据上传</h3>
    <div class="upload">
      <el-upload class="upload-demo" drag :action="$http+'/maintain/upload_culture_result_from_excel'" :limit="1"
        list-type="picture" accept=".xlsx" :auto-upload="false" :on-change="beforeUpload" :before-remove="beforeRemove">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em>
          <p style="font-size: 80%;">只能上传<strong><em>xlsx</em></strong>格式文件且不超过10MB</p>
        </div>
      </el-upload>
      <div class="error-msg"
        v-loading="loading"
        element-loading-text="正在上传中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)">
        <el-alert v-if="messageErr" :title="messageErr" type="error" show-icon>
        </el-alert>
        <el-alert v-else-if="messageSuccess" title="成功提示" type="success" show-icon>
          <div v-html="messageSuccess"></div>
        </el-alert>
        <div v-else>错误展示区
        </div>
      </div>
      <div class="box">
        大纲数据上传(注意：粘贴成值，删除空行空列)
        <table border="1" width="100%">
          <thead>
            <tr>
              <th>日期</th>
              <th>运动员编号</th>
              <th>模板编号(templateId)</th>
              <th>包</th>
              <th>指标编号</th>
              <th>指标值</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>2010/1/10</td>
              <td>2</td>
              <td>2833</td>
              <td>一般素质</td>
              <td>1100</td>
              <td>2.5</td>
            </tr>
            <tr>
              <td>2010/1/10</td>
              <td>2</td>
              <td>2833</td>
              <td>一般素质</td>
              <td>120</td>
              <td>197</td>
            </tr>
            <tr>
              <td>2010/1/10</td>
              <td>2</td>
              <td>2834</td>
              <td>专项技术</td>
              <td>85</td>
              <td>11'56"95</td>
            </tr>
            <tr>
              <td>2010/1/10</td>
              <td>2</td>
              <td>2834</td>
              <td>专项技术</td>
              <td>100</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>2010/1/10</td>
              <td>2</td>
              <td>2834</td>
              <td>专项技术</td>
              <td>1201</td>
              <td>199</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    upload_meta_data_from_excel
  } from '@/api/person.js'
  export default {
    data() {
      return {
        messageErr: '',
        messageSuccess: '',
        loading: false,
      }
    },
    methods: {
      sequenceDownload(row) {
        const element = document.createElement('a')
        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(row.data))
        element.setAttribute('download', row.name + '上传成功.html')
        element.style.display = 'none'
        element.click()
      },
      beforeRemove(file) {
        this.messageErr = this.messageSuccess = ''
      },
      beforeUpload(file) {
        this.loading = true
        var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
        const extension2 = testmsg === 'xlsx'
        const isLt2M = file.size / 1024 / 1024 < 10
        if (!extension2) {
          this.messageErr = '上传文件只能是 xlsx格式!'
          return
        }
        if (file.size > 1024 * 1024 * 10) {
          this.messageErr = '上传文件太大!不能超过10M'
          return
        }
        let fileData = new FormData()
        fileData.append("file", file.raw);
        upload_meta_data_from_excel(fileData).then(res => {
          if (res.code === 200) {
            this.messageSuccess = '上传成功! ' + res.message
            this.sequenceDownload({
              name: file.name.split('.')[0],
              data: res.message
            })
          } else {
            this.messageErr = res.message
          }
          this.loading = false
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .upload {
    padding: 20px;
    position: relative;

    .upload-demo {
      display: flex;
      justify-content: space-between;
    }

    .error-msg {
      position: absolute;
      top: 20px;
      left: 200px;
      width: 60%;
      min-height: 200px;
      border: 1px solid #d8d8d8;
      background-color: #FFFFFF;
      border-radius: 4px;
    }

    .box {
      width: 100%;
      height: 300px;
      margin-top: 50px;

      table {
        border-collapse: collapse;
        text-align: center;
        background-color: #ffffff;

        tr th {
          width: 15%;
        }
      }
    }
  }
</style>
